<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="username">
    <input type="text" name="" id="age">
    <input type="button" name="" id="send" value="发布">

    <table class="table table-hover">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="list">
            <tr>
                <td>张三</td>
                <td>18</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
    </table>

    <script>
        /*
            信息的 发布--删除 --表格   

            0- 获取元素  两个输入框--一个按钮-- tbody
            1- 点击发布按钮的时候，获取输入框的值--
                创建 tr -- 三个td ， 前两个td 内容 是两个输入框的值
                            第三个td 里面 存放一个 删除按钮
                            
                            
             2-删除按钮 还得添加点击事件--点击的时候删除这一行
        */
        // 0- 获取元素  两个输入框--一个按钮-- tbody
        var usernameIpt = document.querySelector('#username');
        var ageIpt = document.querySelector('#age');
        var sendBtn = document.querySelector('#send');
        var listUl = document.querySelector('#list');

        // 1- 点击发布按钮的时候
        sendBtn.onclick = function () {
            // 获取输入框的值--
            var username = usernameIpt.value;
            var age = ageIpt.value;
            // 创建 tr -- 三个td ， 前两个td 内容 是两个输入框的值
            // 第三个td 里面 存放一个 删除按钮
            var newTr = document.createElement('tr');

            // 第一个td
            var usernameTd = document.createElement('td');
            usernameTd.innerText = username;

            // 第二个td
            var ageTd = document.createElement('td');
            ageTd.innerText = age;

            // 第三个td
            var opTd = document.createElement('td');
            var delBtn = document.createElement('button');
            delBtn.innerText = '删除'
            opTd.appendChild(delBtn)



            // 添加td到tr中
            newTr.appendChild(usernameTd)
            newTr.appendChild(ageTd)
            newTr.appendChild(opTd)

            // tbody 添加 tr
            listUl.appendChild(newTr)

            // 清空输入框的值
            usernameIpt.value = ''
            ageIpt.value = ''

            // 2-删除按钮 还得添加点击事件--点击的时候删除这一行
            delBtn.onclick = function () {
                console.log('点击了按钮');
                console.log(delBtn);//点击的那个按钮
                console.log(this);//点击的那个按钮******

                // 按钮的父元素是 td，td的父元素是tr
                // delBtn.parentElement.parentElement.remove()
                this.parentElement.parentElement.remove()

                // newTr.remove()
            }


        }


    </script>

</body>

</html>